<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="css/bootstrap.css" />
  <link rel="stylesheet" href="css/comm.css" />
  <link rel="stylesheet" href="css/swiper.min.css" />
  <link rel="stylesheet" href="css/font.css" />
  <link rel="stylesheet" href="css/message.css" />
  <link rel="stylesheet" href="css/footer.css" />
  <link rel="stylesheet" href="css/invoice_h5_baseInfo.css" />
  <title>维亚生物试剂</title>
</head>

<body style="background-color: #f4f4f4">
  <!-- pc头部搜索，banner -->
  <header>
    <!-- 头部 -->
    <img src="./image/settion.png" alt="" class="seting" />
    <div class="header_title">收货地址</div>
    <div style="width: 30px;"></div>
    <div class="mobilelist">
      <div class="d-flex justify-content-between mobmentyop align-items-center">
        <i class="bi bi-x-lg closenr"></i>
      </div>
      <div class="mobilmenuLi">
        <div style="height: 30px"></div>
        <li class="active">
          <a href="#!">基本信息</a>
        </li>
        <li>
          <a href="#!">公司资料</a>
        </li>
        <li>
          <a href="#!">我的订单</a>
        </li>
        <li>
          <a href="#!">我的购物车</a>
        </li>
        <li>
          <a href="#!">收货地址</a>
        </li>
        <li>
          <a href="#!">发票信息</a>
        </li>
        <li>
          <a href="#!">我的收藏</a>
        </li>
        <li>
          <a href="#!">绑定微信/绑定企业微信</a>
        </li>
      </div>
    </div>
  </header>
  <div class="Appconatiner">
    <div class="basic_info">
      <div class="basic_info_header">
        <div class="flex_row">
          <div class="avatar">
            <img src="./image/zhuce.png" alt="" srcset="" />
          </div>
          <div class="name">用户001</div>
        </div>
        <div class="exit">退出</div>
      </div>
      <div class="title_container flex_row">
        <div>收货地址</div>
        <button class="btn btn-success addAddressBtn" type="submit">
          添加新地址
        </button>
      </div>
      <!-- 收货地址 -->
      <div class="address_table">
        <div class="address_table_td">
          <div class="w-25 p-2" style="color: #575757">收货人</div>
          <div class="w-25 p-2" style="color: #575757">收货地址</div>
          <div class="w-25 p-2" style="color: #575757">收货人联系电话</div>
          <div class="w-25 p-2" style="color: #575757">操作</div>
          <div class="w-25 p-2" style="color: #575757">默认地址</div>
        </div>
        <div class="address_table_content"></div>
      </div>
    </div>
  </div>

  <!-- 弹出收货地址 -->
  <div id="fixPhone">
    <div class="fixClonse">
      <div class="icon-close butonClose">
        <i class="bi bi-x-lg"></i>
      </div>
    </div>
    <div class="fixDivconatiner">
      <div class="d-flex align-items-center fixHeader">
        <img src="./image/location.png" alt="">
        <span>添加地址</span>
      </div>
      <div class="fixCzontent">
        <div class="addresForm d-flex align-items-center">
          <div class="addFormLabel">
            <span>所在地区</span>
          </div>
          <div class="d-flex justify-content-between align-items-center" style="width: 75%;">
          <div class="addSelet">
            <select id="province" class="form-control col" placeholder="省份" style=" -webkit-appearance: none;">
              <option selected>广东</option>
              <option>北京</option>
            </select>
            <i class="bi bi-chevron-down"></i>
          </div>
          <div class="addSelet">
            <select id="city" class="form-control col" placeholder="城市" style=" -webkit-appearance: none;">
              <option>东莞</option>
            </select>
            <i class="bi bi-chevron-down"></i>
          </div>
          <div class="addSelet">
            <select id="area" class="form-control col" placeholder="区/县" style=" -webkit-appearance: none;">
              <option>长安</option>
            </select>
            <i class="bi bi-chevron-down"></i>
          </div>
        </div>
        </div>
        <div class="addresForm d-flex align-items-center">
          <div class="addFormLabel">
            <span>详细地址</span>
          </div>
          <div class="formTexare">
            <textarea name="" id=""></textarea>
          </div>
        </div>
        <div class="addresForm d-flex align-items-center">
          <div class="addFormLabel">
            <span>收货人</span>
          </div>
          <div class="formTexare">
            <input type="text">
          </div>
        </div>
        <div class="addresForm d-flex align-items-center">
          <div class="addFormLabel">
            <span>手机号码</span>
          </div>
          <div class="formTexare">
            <input type="text">
          </div>
        </div>
        <div class="addresForm d-flex align-items-center">
          <div class="addFormLabel">
           
          </div>
        <div class="d-flex align-items-center morse">
          <div class="morendiv d-flex align-items-center justify-content-center">
            <div class="shocosame"></div>
          </div>
          <span>设为默认</span>
        </div>
        </div>
      </div>
      <div class="fixbottom d-flex justify-content-center">
      
        <div class="d-flex justify-content-center align-items-center bottomBUtom shocolor">
          <span>确定</span>
        </div>
        <div class="d-flex justify-content-center align-items-center bottomBUtom cancelButon">
          <span>取消</span>
        </div>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <footer class="d-flex justify-content-center align-items-center flex-wrap">
    <ul>
      <li class="topbig"><a href="#!">产品中心</a></li>
      <li><a href="#!">体外诊断试剂</a></li>
      <li><a href="#!"> 药研试剂</a></li>
      <li><a href="#!">定制服务</a></li>
    </ul>
    <div class="line"></div>
    <ul>
      <li class="topbig"><a href="#!">友情链接</a></li>
      <li><a href="https://www.vivabioinnovator.com">维亚生物创新中心</a></li>
      <li><a href="https://www.langhuapharma.com">朗华制药</a></li>
      <li><a href="https://synmedchem.com">信实医药</a></li>
    </ul>
    <div class="line"></div>
    <ul>
      <li class="topbig"><a href="#!">关注我们</a></li>
      <div class="d-flex align-items-center sunsnediv">
        <div class="cicleine d-flex align-items-center justify-content-center weixnimg">
          <img src="./image/weixin.png" alt="" srcset="" />
          <div class="hidden-div">
            <p class="shahr">微信扫一扫：分享</p>
            <img src="./image/ewm.jpg" alt="" />
            <p>扫一扫关注公众号</p>
          </div>
        </div>
        <div class="cicleine d-flex align-items-center justify-content-center insimg">
          <a href="https://www.linkedin.cn/incareer/company/14402828/admin" target="_blank">
            <img src="./image/ins.png" alt="" srcset="" />
          </a>
        </div>
        <div class="cicleine d-flex align-items-center justify-content-center insimg">
          <a href="https://twitter.com/viva_biotech" target="_blank">
            <img src="./image/twitter.png" alt="" srcset="" />
          </a>
        </div>
      </div>
    </ul>
    <div class="line"></div>
    <ul>
      <li class="topbig"><a href="#!">联系我们</a></li>
    </ul>
  </footer>
  <!-- 选项 1：jQuery 和 Bootstrap 集成包（集成了 Popper） -->
  <script src="js/bootstrap.js"></script>
  <script src="js/index.js"></script>

  <script>
    $(".closenr").click(function () {
      $(".mobilelist").removeClass("slide-right");
      $(".mobilelist").addClass("slide-out-left");
      setTimeout(function () {
        $(".mobilelist").css("display", "none");
      }, 1000);
    });

    $(".seting").click(function () {
      $(".mobilelist").removeClass("slide-out-left");
      $(".mobilelist").css("display", "block");
      $(".mobilelist").addClass("slide-right");
    });

    $(".addAddressBtn").click(function () {
      $("#fixPhone").css("display", "block");
      disableScroll()
    });
    $(".butonClose").click(function () {
      $("#fixPhone").css("display", "none");

      enableScroll()
    });
    $(".cancelButon").click(function () {
      $("#fixPhone").css("display", "none");

      enableScroll()
    });
    $(".morendiv").click(function () {
          if($(".shocosame").css('display') =='block') {
            $(".shocosame").css('display','none')
          }else{
            $(".shocosame").css('display','block')
          }
      });
    function disableScroll() {
      document.body.style.overflow = 'hidden';
    }

    // 启用滚动
    function enableScroll() {
      document.body.style.overflow = 'auto'; // 或者 'scroll'，根据需求选择
    }
    window.onresize = function () {

    };
    window.dispatchEvent(new Event("resize"));
  </script>
</body>

</html>

 